<template>
  <div>
    <h1>子组件</h1>
    <h2>{{ info }}</h2>
    <h2>{{ obj }}</h2>
    <h2>{{ mag.mag }}</h2>
    <h2>{{ mag1 }}</h2>
    <h2>{{ $attrs.msg }}</h2>
    <button @click="pinchuan">拼串</button>
    <Sun></Sun>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import Sun from "../components/Sun.vue";
export default defineComponent({
  setup(props, context) {
    console.log(props);
    console.log(props.info);
    console.log(props.obj);
    console.log(context);

    console.log(context.attrs);
    console.log(context.attrs.msg);
    const msg = context.attrs;

    const msg1 = ref(context.attrs.msg);
    console.log(context.emit);
    context.emit("fun", "大伙都精神精神");

    function pinchuan() {
      context.emit("fun", "大伙都精神精神");
      context.emit("foo");
    }

    console.log(context.slots);
    return {
      msg,
      msg1,
      pinchuan,
    };
  },
  components: {
    Sun,
  },
  props: {
    info: {
      type: String,
      required: true,
      default: "xxx",
    },
    obj: {
      type: Object,
      required: false,
      default: () => {
        return {};
      },
    },
  },
  emits: ["fun", "foo"],
  mounted() {
    console.log(this.$attrs);
  },
});
</script>

<style scoped>
</style>